<template>
	<!-- 标题卡片模式 -->
	<uni-card :title="this.recieveOrder.orderName" 
		mode="title" :is-shadow="true"
		thumbnail="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png"
		:subTitle="'货物为：' + this.recieveOrder.typeName" 
		:extra="this.recieveOrder.freightAmount + '¥'" 
		note="true">
		<view>接到了来自{{this.recieveOrder.customerName}}的订单啦</view>
		<view>订单路程约{{this.recieveOrder.distanceOrder}} 公里</view>
		<template v-slot:footer>
			<view class="footer-box">
				<view class="button">
					<u-button :disabled="canAccept" size="medium" shape="circle" 
					:type="canAccept? 'error': 'success'" :plain="true" ripple @click="accept">
						接单({{restTime}})
					</u-button>
				</view>
				<view class="button">
					<u-button size="medium" shape="circle" type="primary" :plain="true" ripple @click="reject">拒绝
					</u-button>
				</view>
			</view>
		</template>
	</uni-card>
</template>

<script>
	import {
		accept,
		reject
	} from '../../../../api/driver/grabbing.js'
	var QQMapWX = require('../../../../components/mi-map/qqmap-wx-jssdk.min.js')
	var qqmapsdk = new QQMapWX({
		key: 'ZPQBZ-RD7WR-XJ7WM-WOUK2-OZRKF-H3FL5'
	})
	import {
		mapGetters
	} from 'vuex'
	export default {
		props: {
			recieveOrder: {
				type: Object,
				default () {
					return {};
				}
			}
		},
		data() {
			return {
				R: 6371.004,
				leftTime: 30,
				countDown: null,
				canAccept: false,
				distanceDriver: 0 // 订单与司机的距离
			}
		},
		computed: {
			...mapGetters([
				'listen',
				'carCode',
				'name',
				'driverCode'

			]),
			Distance() {
				// let lonA = 110.12345;
				// let latA = 30.12345;
				// let lonOrder = this.recieveOrder.longitude;
				// let latOrder = this.recieveOrder.latitude;
				// let a = Math.abs((latA - latOrder) / 2.0);
				// let b = Math.abs((lonA - lonOrder) / 2.0);
				// let v = Math.sin(a) * Math.sin(a) + Math.cos(latA) * Math.cos(latOrder) * Math.sin(b) * Math.sin(b);
				// return (Math.asin(Math.sqrt(v)) * 2 * this.R).toFixed(2);
				this.getLocation();
				return this.distanceDriver;
			},
			restTime() {
				return this.leftTime;
			}
		},
		created() {
			this.leftTime = 30;
			this.countDown = setInterval(() => {
				this.leftTime--;
				if(this.restTime <= 0){
					clearInterval(this.countDown)
					this.canAccept = true;
				}
			},1000)
		},
		methods: {
			accept() {
				let temp = {
					orderCode: this.recieveOrder.orderCode,
					orderName: this.recieveOrder.orderName,
					driverName: this.name,
					driverCode: this.driverCode,
					carCode: this.carCode,
					orderState: this.recieveOrder.orderState,
					distanceOrder: this.recieveOrder.distanceOrder,
					distanceDriver: this.calculateDistance
				}	
				accept({
					grabbingOrderDto: JSON.stringify(temp)
				}).then(res => {
					if (res.header.code === 200) {
						uni.showToast({
							title: '抢单成功',
							icon: 'success',
							duration: 1500
						});
						uni.switchTab({
							url: '../../../../order/index',
							animationType: 'pop-in',
							animationDuration: 200
						});
					} else {
						uni.showToast({
							title: res.body,
							icon: 'none',
							duration: 1500
						});
						this.$emit('rejectOrder');
					}
				})
			},
			reject() {
				let temp = {
					orderCode: this.recieveOrder.orderCode,
					orderName: this.recieveOrder.orderName,
					driverName: this.name,
					driverCode: this.driverCode
				}
				reject({
					orderRejectDto: JSON.stringify(temp)
				})
				.then(res => {
					if (res.header.code === 200) {
						uni.showToast({
							title: '已拒绝',
							icon: 'success',
							duration: 1500
						});
						this.$emit('rejectOrder');
					} else {
						uni.showToast({
							title: res.body,
							icon: 'none',
							duration: 1500
						});
					}
				})
				.catch(err => {
					console.log(err);
				})
			},
			// 查询现在的位置
			getLocation() {
				let this_ = this
				uni.getLocation({
					type: 'gcj02', // 返回国测局坐标
					success: function(res) {
						this_.calculateDistance(res)
					},
					fail: function(e) {
						uni.showToast({
							icon: 'none',
							title: '获取地址失败, 请检查是否开启定位权限~~'
						})
					}
				})
			},
			// 距离计算
			async calculateDistance({
				latitude,
				longitude
			}) {
				let that = this;
				qqmapsdk.calculateDistance({
					from: {
						latitude: latitude,
						longitude: longitude
					},
					to: [{
						latitude: parseFloat(this.orderItem.latitude),
						longitude: parseFloat(this.orderItem.longitude), 
					}],
					sig: 'ZPQBZ-RD7WR-XJ7WM-WOUK2-OZRKF-H3FL5',
					success: res => {
						that.distanceDriver = (res.result.elements[0].distance / 1000).toFixed(2);
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.footer-box {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		.button {
			
		}
	}
</style>
